<script lang="ts" setup>
import RichText from "@/components/RichText.vue";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  tips: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    default: "编辑器",
  },
});

const emits = defineEmits(["update:modelValue", "change"]),
  activityReadonly = inject("activityReadonly", false);

const onEditorChange = (value: any) => {
  emits("update:modelValue", value);
  emits("change", value);
};
</script>
<template>
  <div class="richText">
    <div class="name">
      {{ name }}<span class="tips" v-if="tips">({{ tips }})</span>
    </div>
    <rich-text
      :model-value="modelValue"
      :disabled="activityReadonly"
      @change="onEditorChange"
    ></rich-text>
  </div>
</template>
<style lang="scss" scoped>
.richText {
  margin-bottom: 10px;
  .name {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .tips {
    font-size: 12px;
    color: #666666;
  }
}
</style>
